<template>
	<view>
		<!-- <view class="w-1 grent"></view> -->
		<!-- 自定义导航栏 -->
		<view class="w-1 mynav">
			<view class="status_bar"></view>
			<view class="w-1 p-r-30" style="height: 44px; overflow: hidden;" @tap="goback">
				<u-icon name="arrow-leftward" class="arrow-leftward"></u-icon>
				<text class="c-ff bold fs-36 fm-ali">每日活动</text>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<scroll-view scroll-y="true" class="scroll" >
				<view class="listbox">
					<view class="box" v-for="(item,index) in list" @click="goshopinfo(item.id,item.platform,item.c_father_goods_id)">
						<view class="img">
							<image :src="baseUrl.cdnurl+item.image" mode="aspectFill" style="width: 100%;height: 300rpx;"></image>
						</view>
						<view class="title text-line-2">{{item.title || ''}}</view>
						<view class="price">
							<view class="left_pirce">
								<text class="symbol">￥</text>
								{{item.activity_price || ''}}
							</view>
							<view class="right_price">
								<text class="symbol">￥</text>
								{{item.price}}
							</view>
						</view>
						<!-- v-if="is_hg == 2" -->
						<view class="notice animated11 rubberBand11" >
							此商品可原价回购
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {pointsPrice} from '@/utils/util.js'
	import config from '@/utils/base.js';
	import Invite from '@/components/InvitePup/InvitePup'
	export default {
		data() {
			return {
				id: '',
				count:'',
				page: 1,
				list: [],
				last_page:'',
				baseUrl:config
			}
		},
		components: {
			Invite
		},
		filters:{
			pointsPrice
		},
		onLoad(e) {
			if(!e.id){
				uni.showToast({
					title: "获取活动信息失败",
					"icon": "none"
				})
				return;
			}else{
				this.id = e.id;
				this.getList()
			}
			
			
		},
		onShow() {
		},
		onPullDownRefresh() {
			this.getList()
		},
		onReachBottom() {
			if(this.list.length<this.count){
				this.page++
				this.getList()
			}
		},
		methods: {
			getList(){
				let that = this;
				this.$get({
					url:'/activity/activityGoodsList',
					data:{
						activity_id:parseInt(this.id),
						page:this.page,
						pageSize:10
					}
				}).then(res=>{
					that.list = [...that.list,...res.data.data],
					that.last_page = res.data.last_page
				})
			},
			goshopinfo(id,platform,c_father_goods_id){
				if(!id){
					return;
				}
				let platform1 = platform||0
				let c_father = c_father_goods_id || 0
				console.log(c_father)
				uni.navigateTo({
					url:"/pages/Home/GoodsDetail/GoodsDetail?id="+id+'&platform='+platform1+'&c_father_goods_id='+c_father
				})
			},
			goback(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.scroll{
		width: 100%;
		height: 100%;
	}
	.arrow-leftward {
		margin-right: 14rpx;
	}
	.listbox .notice{
		margin-top: 20rpx;
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #E56D31;
	}
	.listbox .box .right_price{
		font-size: 24rpx;
		color: #CCCCCC;
		text-decoration:line-through;
	}
	.listbox .box .symbol{
		font-size: 24rpx;
	}
	.listbox .box .price{
		font-weight: bold;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		color: #f00;
	}
	.listbox .box .title{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
		color: #000;
		font-size: 28rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		height: 80rpx;
		/* white-space:nowrap; */
	}
	.listbox .box{
		display: inline-block;
		width: 48%;
		overflow: hidden;
		border: 1px solid #F4F4F4;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
	.listbox{
		display: flex;
		padding: 34rpx;
		overflow: hidden;
		flex-flow:row wrap;
		justify-content: space-between;
	}
	.list{
		top: 160rpx;
		background: #fff;
		min-height: calc(100vh - 120rpx);
		position: relative;
		z-index: 999;
		border-radius: 40rpx 40rpx 0 0 ;
	}
	.fm-ali{
		color: #000;
		/* background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
		    -webkit-background-clip:text; 
		    -webkit-text-fill-color:transparent; */ 

	}
	page {
		padding-bottom: 80rpx;
	}
	.grent {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 520rpx;
		background: linear-gradient(90deg, #FDF0F0 0%, #ECF7E7 100%);
	}

	.mynav{
		background: linear-gradient(90deg, #FDF0F0 0%, #ECF7E7 100%);
		background-size: 100vh 520rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		height: 180rpx;
		/* overflow: hidden; */
	}
	
	@-webkit-keyframes rubberBand11 {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	
		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}
	
		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}
	
		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}
	
		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}
	
		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}
	
		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}
	
	/* @keyframes rubberBand11 {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	
		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}
	
		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}
	
		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}
	
		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}
	
		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}
	
		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	} */
	
	.rubberBand11 {
		-webkit-animation-name: rubberBand11;
		animation-name: rubberBand11;
	}
	
	.animated11 {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
	}
</style>
